<!--上传文件组件 不保存文件大小和文件名-->
<script setup>
import { ref, onUnmounted, computed } from 'vue'
import { getToken } from '@/utils/token'
import { ElMessage } from 'element-plus'
import { Loading, Document, Close } from '@element-plus/icons-vue'

defineOptions({
  name: 'UploadFile'
})

const modelValue = defineModel({type: Array, default: () => ([])})
const props = defineProps({
  isRead: Boolean,
  limit: {
    type: Number,
    default: 10
  }
})
const emit = defineEmits(['on-upload-success'])
const disabled = ref(false)
const isUploading = ref(false)
const headers = {
  Authorization: getToken()
}
// const action = `${ import.meta.env.VITE_BASE_URL }/minio地址`
const action = '/mock/upload/file'
const uploaderRef = ref()
const remove = () => {
  disabled.value = false
  isUploading.value = false
}
const delFile = (index) => {
  modelValue.value.splice(index, 1)
}
const beforeFileUpload = (file) => {
  disabled.value = true
  isUploading.value = true
  const fileTypes = ['xlsx', 'xls', 'csv', 'xml', 'doc', 'docx', 'docxf', 'pdf', 'ppt', 'pptx', 'xps', 'md', 'txt', 'zip', 'jar', 'rar', 'exe', 'jpg', 'png', 'svg', 'mp3', 'vma', 'mp4', 'flv', 'rmvb', 'mvb']
  const fileType = file.name.split('.')[file.name.split('.').length - 1]
  const isFile = fileTypes.includes(fileType)
  const isLt800M = file.size / 1024 / 1024 < 801

  if ( !isFile) {
    ElMessage.error({message: '仅支持.doc/.docx/.pdf格式文件'})
    disabled.value = false
    isUploading.value = false
    return false
  }
  if ( !isLt800M) {
    ElMessage.error({message: '文件大小不能超过800MB!'})
    isUploading.value = false
    disabled.value = false
  }
  return isLt800M && isFile
}

const fileList = computed({
  get: () => modelValue.value,
  set: (val) => {
    modelValue.value = val
  }
})
const onSuccess = (res) => {
  if (res.success) {
    fileList.value.push(res.data)
  } else {
    ElMessage.error({message: res?.msg})
  }
  disabled.value = false
  isUploading.value = false
}
onUnmounted(() => {
  if (uploaderRef?.value) {
    uploaderRef.value.clearFiles()
  }
})
</script>
<template>
  <div class="upload-files">
    <template v-if="!isRead">
      <ElUpload
          class="mb-1"
          ref="uploaderRef"
          :action="action"
          :headers="headers"
          :limit="limit"
          :show-file-list="false"
          :on-remove="remove"
          :on-success="onSuccess"
          :before-upload="beforeFileUpload"
          :disabled="disabled"
      >
        <ElButton type="primary" :disabled="disabled">
          <span v-if="isUploading"><ElIcon class="is-loading"><Loading/></ElIcon>上传中</span>
          <span v-else>点击上传</span>
        </ElButton>
      </ElUpload>
    </template>
    <template v-if="modelValue.length>0">
      <div class="file-list">
        <div class="file-item" v-for="(path,index) in modelValue" :key="index">
          <!--上传成功后返回的文件地址 <ElLink :href="`${fileUrl}${path}`">-->
          <ElLink :href="path">
            <ElIcon class="file-icon">
              <Document/>
            </ElIcon>
            附件{{ index + 1 }}-{{ path.split('/').slice(-1)[0] }}
          </ElLink>
          <ElIcon v-if="!isRead" class="file-del-icon" @click="delFile(index)">
            <Close/>
          </ElIcon>
        </div>
      </div>
    </template>
    <span v-if="modelValue.length===0&&isRead" class="font-grey">暂无附件</span>

  </div>
</template>

<style lang="scss">
.upload-files {
  .file-list {
    .el-link__inner {
      min-width: 200px;
    }
  }
}
</style>
